<template>
	<view>
		<global-navgation title="产品方案表"></global-navgation>
		<view class="container">
			<view class="basics">
				<view class="set-meal">
					基础产品套餐
				</view>
				<view class="info-table">
					<view class="info-head">
						<text>序号</text><text>产品名称</text><text>数量</text><text>合计	</text>
					</view>
					<view class="info-item" v-for="(item,index) in item">
						<text>{{index+1>=10?index+1:'0'+(index+1)}}</text><text>{{item.goodName}}</text><text>{{item.count}}</text><text>￥{{item.price*item.count}}</text>
						<view class="line"></view>
					</view>
					
					
					
					
					<view class="total">
						合计: ￥{{totalPrice(item)}}
					</view>
					
				</view>
				
			</view>
			
			<view class="basics">
				<view class="set-meal">
					基础产品套餐
				</view>
				<view class="info-table">
					<view class="info-head">
						<text>序号</text><text>产品名称</text><text>数量</text><text>合计	</text>
					</view>
					<view class="info-item" v-for="(item,index) in list">
						<text>{{index+1>=10?index+1:'0'+(index+1)}}</text><text>{{item.goodName}}</text><text>{{item.count}}</text><text>￥{{item.price*item.count}}</text>
						<view class="line"></view>
					</view>
					
					
					
					
					<view class="total">
						合计: ￥{{totalPrice(list)}}
					</view>
					
				</view>
				
			</view>
			
			<!-- <view class="basics">
				<view class="set-meal">
					辅助单品
				</view>
				<view class="info-table">
					<view class="info-head">
						<text>序号</text><text>产品名称</text><text>数量</text><text>合计	</text>
					</view>
					<view class="info-item">
						<text>01</text><text>蛋白蚕丝面膜</text><text>1</text><text>￥888.88</text>
						<view class="line"></view>
					</view>
					
					
					
					<view class="total">
						合计: ￥9999.99
					</view>
					
				</view>
				
			</view> -->
		</view>
		
		
		<view class="submit">
			<button type="default" @click="screenshot">保存至相册</button>
		</view>
	</view>
</template>

<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default{
		components: {
			globalNavgation
		},
		data(){
			return{
				data:{},
				list:[],
				item:[]
			}
		},
	
		computed:{
			totalPrice(){
				 return v=>{
					 let total=0
					 console.log(v)
					 v.forEach(v=>{
						 total +=v.count*v.price
					 })
					 return total
				 }
			}
		},
		onLoad(option) {
			this.data=JSON.parse(option.product)
			this.data.forEach(v=>{
				if(!v.type){
					this.list.push(v)
				}else{
					this.item.push(v)
				}
			})
			// console.log('rrrr',this.list)
			// console.log('rrrr',this.item)
		},
		methods:{
			screenshot(){
				
			}
		}
	}
</script>

<style scoped>
	.container{
		width: 100%;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 36rpx;
		color: rgba(0, 0, 0, 0.85);
	}
	
	.container .basics{
		width: 686rpx;
		margin: 0 auto;
	}
	
	.container .basics .set-meal{
		padding-top: 48rpx;
	}
	
	.container .basics .info-table{
		margin-top: 24rpx;
	}
	
	.container .basics .info-table .info-head{
		width: 100%;
		height: 88rpx;
		background: #F6F6F6;
		line-height: 88rpx;
		position: relative;
	}
	
	.container .basics .info-table .info-head text{
		position: absolute;
		font-weight: 550;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.5);
	}
	
	.container .basics .info-table .info-head text:first-child{
		left: 16rpx;
	}
	.container .basics .info-table .info-head text:nth-child(2){
		left: 102rpx;
	}
	.container .basics .info-table .info-head text:nth-child(3){
		left: 432rpx;
	}
	.container .basics .info-table .info-head text:nth-child(4){
		left: 528rpx;
	}
	
	.container .basics .info-table .info-item{
		width: 100%;
		height: 126rpx;
		background-color: #FFFFFF;
		position: relative;
		line-height: 126rpx;
	}
	
	.container .basics .info-table .info-item text{
		position: absolute;
		font-weight: 550;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.75);
	}
	.container .basics .info-table .info-item text:first-child{
		left: 16rpx;
	}
	.container .basics .info-table .info-item text:nth-child(2){
		left: 102rpx;
	}
	.container .basics .info-table .info-item text:nth-child(3){
		left: 432rpx;
	}
	.container .basics .info-table .info-item text:nth-child(4){
		left: 528rpx;
	}
	
	.container .basics .info-table .info-item .line{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 2rpx;
		background: rgba(0, 0, 0, 0.05);
	}
	
	.container .basics .info-table .total{
		margin-left: 464rpx;
		margin-top: 24rpx;
		width: 222rpx;
		height: 44rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #5C80FF;
	}
	
	.submit {
		width: 100%;
		height: 140rpx;
		box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		position: fixed;
		bottom: 0;
	}
	
	.submit button {
		margin-top: 20rpx;
		width: 686rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 36rpx;
		color: #F7F7F7;
		background: linear-gradient(90deg, #3965FF 0%, rgba(57, 101, 255, 0.8) 100%);
		border-radius: 4px;
		
	}
</style>